<template>
  <div class="footer">
    <!-- 链接标签 -->
    <el-row :gutter="20">

      <el-col :span="2">
        <el-popover placement="top" :width="200" trigger="hover">
          <template #reference>
            <el-link type="primary">了解更多</el-link>
          </template>
          <!-- 了解更多 -->
          <div class="knowMore">
            <el-link type="primary" @click="dialogVisibleCommunity = true">社群</el-link>
            <el-link type="primary" href="https://mp.weixin.qq.com/s/78ZiJKTMj3XO38S70kb3FA">公众号</el-link>
          </div>
        </el-popover>
        <div class="grid-content ep-bg-purple" />
      </el-col>
      <el-col :span="2">
        <el-link type="primary" @click="dialogVisibleContact = true">联系我们</el-link>
      </el-col>
    </el-row>
  </div>
  <el-dialog v-model="dialogVisibleCommunity" width="20%">
    <img :src="imageSrc" alt="图片">
    <!-- <div>132123</div> -->
  </el-dialog>
  <el-dialog v-model="dialogVisibleContact" width="22%">
    <h1>联系邮箱:455580107@qq.com</h1>
    <!-- <div>132123</div> -->
  </el-dialog>
  <!-- <el-dialog class="addNewLand" v-model="dialogVisible" width="32%" :before-close="handleClose"
    style="background-color: #a3ea9b"> -->
  <!-- <el-dialog class="addNewLand" v-model="dialogVisible" width="32%" :before-close="handleClose">
    <div class="knowMore">
    </div>
  </el-dialog> -->
</template>


<script>
import { ref } from 'vue'
export default {
  name: "Footer",
  components: {},
  data() {
    return {
      dialogVisibleCommunity: ref(false),
      dialogVisibleContact: ref(false),

      imageSrc: require("../assets/社群.png")
    };
  },
  created() { },
  mounted() { },
  methods: {
    showDialog() {
      this.dialogVisibleCommunity = true;
    }
  },
};
</script>

<style lang="css" scoped>
/* 了解更多 */
.knowMore {
  display: flex;
  justify-content: space-around;
}

.el-dialog__header {
  padding: 0;
  height: 0;
}

.el-dialog img {
  margin-left: 30px;
  height: 200px;
  width: 200px;


}


/* 底部盒子 */
.footer {
  height: 100;
  width: 100%;
  position: fixed;
  bottom: 0;
}

/* 链接下划线 */
a {
  text-decoration: none;
}

/* 链接布局 */
.el-col {
  /* background-color: aqua; */
  margin: 0 20px 0 20px;
}

.el-row {
  margin-bottom: 0px;
  /* background-color: aquamarine; */
  display: flex;
  justify-content: center;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.ep-bg-purple {
  /* background-color: purple; */
}

/* 链接标签 */
.el-link {
  /* margin-right: 8px; */
  font-size: 20px;
}

.el-link .el-icon--right.el-icon {
  vertical-align: text-bottom;
}
</style>
